{% extends "base.html" %}
{% block title %}
    注册
{% endblock %}
{% block head %}
<!-- 注册页面的JavaScript -->
<script src="{% static 'js/register.js' %}"></script>
{% endblock %}
{% block main %}
<div style="max-width: 300px;" class="m-auto" >
    <div class="text-center">
        <h2>注册</h2>
    </div>
    
    <!-- 显示错误信息 -->
    {% if error %}
    <div class="alert alert-danger" role="alert">
        {{ error }}
    </div>
    {% endif %}
    
    <form action="" method="post">
        {% csrf_token %}
        <div class="mb-3">
            <label for="username">用户名</label>
            <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="mb-3">
            <label for="email">邮箱</label>
            <input type="email" name="email" class="form-control" id="email" placeholder="请输入邮箱">
        </div>
        <div class="mb-3">
            <label for="code">验证码</label>
            <div class="input-group mb-3">
                <!-- 修改name属性从code改为captcha -->
                <input type="text" name="captcha" class="form-control" placeholder="请输入验证码" aria-label="Recipient's username" aria-describedby="button-addon2">
                <!-- 添加data-captcha-url属性 -->
                <button class="btn btn-outline-secondary" type="button" data-captcha-url="{% url 'author:send_email_captcha' %}">获取验证码</button>
            </div>
        </div>

        <div class="mb-3">
            <label for="password">密码</label>
            <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
        <div class="mb-3">
            <button type="submit" class="btn btn-warning w-100 mt-3">注册</button>
        </div>
    </form>
</div>
{% endblock %}